<template>
    <div>
        <div class="list-box">
            <el-collapse v-model="activeName">
                <el-collapse-item v-for="(item, index) in dataList" :key="index" :name="index">
                    <template slot="title">
                        <div class="flex" style="justify-content: space-between; width: 100%">
                            <div class="cu-title" @click.stop>
                                <el-radio-group v-model="item.type" @change="actionTypeChange(item)"
                                    :disabled="!!item.saved" :class="item.saved ? 'disabled1' : 'disabled'">
                                    <el-radio v-if="actions.indexOf('device') >= 0" :label="'device'">设备控制
                                    </el-radio>
                                    <el-radio v-if="actions.indexOf('alert') >= 0" :label="'alert'">告警通知
                                    </el-radio>
                                    <el-radio v-if="actions.indexOf('scene') >= 0" :label="'scene'">场景控制
                                    </el-radio>
                                    <!-- <el-radio v-if="actions.indexOf('http') >= 0" :label="'http'">http推送 </el-radio> -->
                                    <el-radio v-if="actions.indexOf('mqtt') >= 0" :label="'mqtt'">mqtt推送
                                    </el-radio>
                                    <el-radio v-if="actions.indexOf('kafka') >= 0" :label="'kafka'">kafka推送
                                    </el-radio>
                                    <el-radio v-if="actions.indexOf('tcp') >= 0" :label="'tcp'">tcp推送
                                    </el-radio>
                                </el-radio-group>
                            </div>
                            <div style="padding-right: 10px">
                                <el-button @click="removeListener(index)" size="small">删除</el-button>
                            </div>
                        </div>
                    </template>
                    <div class="condition-box" v-if="item.type === 'device'">
                        <DeviceAction ref="deviceActionRef" :indexes="index" :services="item.services" :dn="item.dn"
                            @onservices="onservices" />
                    </div>
                    <div class="condition-box" v-if="item.type === 'alert'">
                        <AlertAction ref="refAlertAction" :indexes="index" :services="item.services"
                            @onalert="onalert" />
                    </div>
                    <div class="condition-box" v-if="item.type === 'http'">
                        <HttpAction :config="item" :indexes="index" @onconfig="onconfig" />
                    </div>
                    <!-- <div class="condition-box" v-if="item.type === 'mqtt'">
                        <MqttAction :config="item" />
                    </div>
                    <div class="condition-box" v-if="item.type === 'kafka'">
                        <KafkaAction :config="item" />
                    </div>
                    <div class="condition-box" v-if="item.type === 'tcp'">
                        <TcpAction :config="item" />
                    </div> -->
                    <!-- <div class="condition-box" v-if="item.type === 'alert'">
                        <AlertAction :config="item" />
                        保存后，在警告配置中关联此规则
                    </div> -->
                </el-collapse-item>
            </el-collapse>
        </div>
        <el-button style="margin-top: 10px" type="primary" size="small" @click="handleAdd">新增输出</el-button>
    </div>
</template>

<script>
import DeviceAction from "../components/DeviceAction.vue";
import HttpAction from "../components/HttpAction.vue";
// import MqttAction from '../components/MqttAction.vue'
// import KafkaAction from '../components/KafkaAction.vue'
// import TcpAction from '../components/TcpAction.vue'
import AlertAction from "../components/AlertAction.vue";

export default {
    props: {
        list: {
            type: Array,
            default: () => [],
        },
        actions: {
            type: String,
            default: "",
        },
    },
    components: { DeviceAction, HttpAction, AlertAction },
    data() {
        return {
            activeName: [],
            dataList: [
                // {
                //     type: "",//类型：设备控制device，推送http
                //     saved: true,
                //     config: "",
                //     services: [
                //         {
                //             device: "Rf4QSjbm65X45753/TEST_SW_000047",//产品 + / + 设备imei
                //             identifier: "set",//标识
                //             inputData: [
                //                 {
                //                     identifier: "powerstate",//输出表述
                //                     value: "off"//输出值
                //                 }
                //             ]
                //         }
                //     ],
                // }
            ],
        };
    },
    watch: {
        "dataList.length": {
            handler(newVal) {
                // console.log(this.dataList,'newVal');
                this.onactions(); // 触发事件
            },
            // immediate: true, // 立即执行
        },
    },
    created() {
        for (let i = 0; i < 100; i++) {
            this.activeName.push(i);
        }
    },
    methods: {
        // async validateForm2() {
        //     try {
        //         await this.$refs.refAlertAction[0].validateForm(); // 调用孙子页面的验证方法
        //         // 其他子页面的验证逻辑...
        //     } catch (error) {
        //         console.error(error);
        //         throw error; // 将错误向上抛出
        //     }
        // },
        // 编辑
        getList() {
            this.dataList = this.list.map((item) => {
                if (item.config) {
                    // 编辑
                    item = JSON.parse(item.config || "{}");
                }
                return item;
            });
            console.log(this.dataList, "dataList");
        },
        //设备控制更新数据
        onservices(e, index, dn) {
            console.log(dn, "设备控制更新数据", e);
            this.dataList[index].services = e;
            this.dataList[index].dn = dn;
            console.log(this.dataList, "this.dataList");
            this.onactions(); // 触发事件
        },
        //输出 ：告警通知
        onalert(e, index) {
            // console.log('设备控制更新数据',e, index);
            this.dataList[index].services = [e];
            // console.log(this.dataList, 'this.dataList');
            this.onactions(); // 触发事件
        },
        // http推送更新数据
        onconfig(e, index) {
            this.dataList[index] = e;
            // console.log(this.dataList, 'this.dataList');
            this.onactions(); // 触发事件
        },
        onactions() {
            this.$emit("onactions", this.dataList);
        },
        // 新增输出
        handleAdd() {
            this.dataList.push({
                services: [],
            });
        },
        // 删除输出
        removeListener(index) {
            this.dataList.splice(index, 1);
        },
        actionTypeChange(item) {
            // console.log(item);
            if (item.services.length === 0) {
                if (item.type === "http") {
                    item.services = [
                        {
                            url: "",
                            script: `this.translate=function(msg,device){
                            }`,
                        },
                    ];
                }
            }
        },
        getDestroy() {
            this.dataList = [];
        },
    },
    beforeDestroy() { },
};
</script>

<style lang="less" scoped>
.list-box {
    margin-top: 10px;

    .cu-title {
        width: calc(100% - 30px);
        cursor: auto;
        display: flex;
        align-items: center;

        .item {
            width: 250px;
            margin-right: 10px;
        }
    }
}

::v-deep(.el-collapse-item__header) {
    background-color: #f2f2f2;
    padding: 0 12px;
}

.condition-box {
    background-color: @ruleBgcolor;
    padding: 15px;
    border-top: @ruleBgcolor3;

    .main {
        border: @ruleBgcolor2;

        .title {
            padding: 12px;
            color: @ruleColor;
            font-weight: 600;
            border-bottom: @ruleBgcolor3;
        }

        .main-box {
            padding: 10px;

            .box {
                display: flex;
                align-items: center;

                .item {
                    border: @ruleBgcolor2;
                    padding: 6px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                    flex: 1;

                    .param-item {
                        margin-bottom: 8px;
                    }
                }
            }
        }
    }
}

.flex {
    display: flex;
}

// 折叠
.el-collapse {
    border-top: none;
    border-bottom: none;
    border-radius: 5px !important;
}

::v-deep .el-collapse-item__header {
    color: #8299c9;
    font-size: 14px;
    background-color: @ruleBgcolor !important;
    border: none;
    border-radius: 5px !important;
    padding: 0 12px;
}

::v-deep .el-collapse-item__content {
    color: #fff;
    font-size: 13px;
    border: none !important;
    //   padding: 10px 0 10px 10px;
    background-color: transparent !important;
    border-radius: 0 0 5px 5px !important;
}

::v-deep .el-collapse-item__wrap {
    border: none;
    background-color: transparent;
}

// 折叠结束
// 单选按钮
::v-deep .disabled .el-radio__input.is-checked .el-radio__inner {
    border-color: #7367f0;
    background: #7367f0;
}

::v-deep .disabled .el-radio__input.is-checked+.el-radio__label {
    color: #7367f0;
}

::v-deep .disabled .el-radio__input.is-checked+.el-radio__label {
    color: #7367f0;
}

::v-deep .el-radio {
    color: @ruleColor;
}

// 禁用的单选按钮
::v-deep .el-radio__input.is-disabled+span.el-radio__label {
    color: #616161;
}
</style>
